<template>
  <div >
    <h3 style="text-align: left">{{file.name}}</h3>
    <hr/>
    <el-input
      type="textarea"
      :rows="2"
      placeholder="请输入内容"
      rows="21"
      resize="none"
      v-model="val"
      :readonly="!model"
      @change="isChanged=true"
      v-loading="valLoading">
    </el-input>
    <div style="float:right;margin-top: 1%">
      <el-button type="success" @click="test">ttt</el-button>
      <el-button type="success" @click="goBack">关闭</el-button>
      <el-button type="primary" @click="saveFile">{{!model ? '编辑':'保存'}}</el-button>
    </div>
  </div>
</template>

<script>
    export default {
      name: "fileContent",
      data () {
        return {
          visible: true,
          dir: {},
          file:{},
          val:'',
          model: false,  //只读
          isChanged: false,
          valLoading: false,
        }
      },
      activated() {
        console.log("act this.data()=");

        this.file = this.$route.params.file;
        console.log(this.$route.params);
        if(this.$route.params.type === 0){
          this.getValHttp();
        }else{
          let data =  this.$store.state.fileText[this.file.parentId+"/"+this.file.name];
          console.log("commit data=");
          console.log(data);
          /*this.visible = data.visible;
          this.dir = data.dir;
          this.file = data.file;
          this.val = data.val;
          this.model = data.model;
          this.isChanged = data.isChanged;
          this.valLoading = data.valLoading;*/
          Object.assign(this.$data,data);

        }
      },
      methods:{
        getValHttp(){
          this.model = false;
          this.isChanged = false;
          this.valLoading = true;
          this.$http({
            url: this.$http.adornUrl('/file/'+this.file.parentId+"/"+this.file.name),
            method: 'get',
          }).then(({data}) => {
            if(data && data.code === 200){
              this.val = data.data.body;
              this.valLoading = false;
              this.$store.commit('fileText/updateText',this.$data);
            }
          })
        },
        saveFile(){
          if(this.model) {
            this.valLoading = true;
            this.$http({
              url: this.$http.adornUrl('/file/' + this.file.parentId + "/" + this.file.name),
              method: 'post',
              data: this.$http.adornData({
                'data': this.val
              })
            }).then(({data}) => {
              this.valLoading = false;
              if (data && data.code === 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                  duration: 1000
                });
                this.model = false;
                this.isChanged = false;
                //TODO 清空state
                //this.$store.commit('fileText/removeText',this.$data);
              }else{
                this.$message({
                  message: data.message,
                  type: 'success',
                  duration: 1000
                });
              }
            })
          }else{
            this.model = true;
          }
        },
        goBack(){
          if(this.isChanged){
            this.$confirm(`您所作的修改还未保存，确认退出吗`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
               this.close();
            });
          }else{
            this.close();
          }
        },
        close(){
          this.removeTabHandle(this.file.name);
          this.$router.push({
            name: 'file',
          })
        },
        test(){
          console.log('active name='+this.mainTabsActiveName);
        },
        // tabs, 删除tab
        removeTabHandle (tabName) {
          this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
          if (this.mainTabs.length >= 1) {
            // 当前选中tab被删除
            if (tabName === this.mainTabsActiveName) {
              console.log("close active="+tabName);
              var tab = this.mainTabs[this.mainTabs.length - 1]
            }
          }
        },
      },
      watch:{
        val(val,oldVal){
          if(this.model){
            this.$store.commit('fileText/updateText',this.$data);
          }
        },
        /*mainTabActiveName(val,oldVal){
          this.$store.commit('fileText/updateText',this.$data);
        }*/
        /*'$route' (to, from) {
          if(to.name === from.name){
            to.activate();
          }
        }*/
      },
      computed:{
        mainTabsActiveName: {
          get () { return this.$store.state.common.mainTabsActiveName },
          set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
        },
        mainTabs: {
          get () { return this.$store.state.common.mainTabs },
          set (val) { this.$store.commit('common/updateMainTabs', val) }
        },
      }
    }
</script>

<style scoped>

</style>
